<template>
  <div class="rename-workbench">
    <workbench @reset="resetWorkbench">
      <el-tabs
        v-model="fileRenamePropsStore.tabsActive"
        type="border-card"
        stretch
      >
        <el-tab-pane label="自定义" name="custom">
          <custom-sub-tab :flag="flag" />
        </el-tab-pane>
        <el-tab-pane label="插入" name="insert">
          <insert-sub-tab :flag="flag" />
        </el-tab-pane>
        <el-tab-pane label="替换" name="replace">
          <replace-sub-tab :flag="flag" />
        </el-tab-pane>
        <el-tab-pane label="删除" name="remove">
          <remove-sub-tab :flag="flag" />
        </el-tab-pane>
        <el-tab-pane label="导入" name="import">
          <import-sub-tab ref="importSubTabRef" :table-data="tableData" />
        </el-tab-pane>
      </el-tabs>
    </workbench>
  </div>
</template>

<script lang="ts" setup>
import useNewFileNameFormStore from '@renderer/store/Form/NewFileNameFormStore'
import useTransformNameFormStore from '@renderer/store/Form/TransformNameForm'
import useSerialNumberFormStore from '@renderer/store/Form/SerialNumberFormStore'
import useSuffixFileNameFormStore from '@renderer/store/Form/SuffixFileNameFormStore'
import useInsertNameFormStore from '@renderer/store/Form/InsertNameFormStore'
import useReplaceContentFormStore from '@renderer/store/Form/ReplaceContentFormStore'
import useContentSwapFormStore from '@renderer/store/Form/ContentSwapFormStore'
import useContentRemoveFormStore from '@renderer/store/Form/ContentRemoveFormStore'
import useFileRenameExcelStore from '@renderer/store/Excel/FileRenameExcelStore'
import CustomSubTab from './SubTab/CustomSubTab.vue'
import ImportSubTab from './SubTab/ImportSubTab.vue'
import InsertSubTab from './SubTab/InsertSubTab.vue'
import RemoveSubTab from './SubTab/RemoveSubTab.vue'
import ReplaceSubTab from './SubTab/ReplaceSubTab.vue'
import Workbench from '@renderer/components/Workbench/index.vue'
import useTransferName from '@renderer/hooks/useTransferName'
import useFileRenamePropsStore from '@renderer/store/CpnProps/FileRenamePropsStore'
import useResetWorkbench from '@renderer/hooks/useResetWorkbench'
import { ref, watch } from 'vue'
import type { WatchHandle } from 'vue'

const props = defineProps<{
  tableData: ITableDataItem[]
  // 文件 / 目录标志
  flag: 'file' | 'folder'
}>()

const newFileNameFormStore = useNewFileNameFormStore()
const transformNameFormStore = useTransformNameFormStore()
const serialNumberFormStore = useSerialNumberFormStore()
const suffixFileNameFormStore = useSuffixFileNameFormStore()
const insertNameFormStore = useInsertNameFormStore()
const replaceContentFormStore = useReplaceContentFormStore()
const contentSwapFormStore = useContentSwapFormStore()
const contentRemoveFormStore = useContentRemoveFormStore()
const fileRenameExcelStore = useFileRenameExcelStore()
const fileRenamePropsStore = useFileRenamePropsStore()

const {
  resetTableDataList,
  newFileNameTransfer,
  ruleTransfer,
  serialNumberTransfer,
  suffixFileNameTransfer,
  insertNameTransfer,
  replaceContentTransfer,
  contentSwapTransfer,
  contentRemoveTransfer
} = useTransferName(() => props.tableData)

// 当前启用的监听器
const curActiveWatch: WatchHandle[] = []

watch(
  () => fileRenamePropsStore.tabsActive,
  (newVal) => {
    // 重置启用的监听器
    handleResetWatch()
    // 重新启用监听器
    if (newVal === 'custom') {
      loadCustomWatch()
    } else if (newVal === 'insert') {
      loadInsertWatch()
    } else if (newVal === 'replace') {
      loadReplaceWatch()
    } else if (newVal === 'remove') {
      loadRemoveWatch()
    } else {
      loadImportWatch()
    }
  },
  {
    immediate: true
  }
)

// 后缀名监听
watch([suffixFileNameFormStore], () => {
  suffixFileNameTransfer()
})

function handleResetWatch() {
  // 取消当前启用的监听器
  if (curActiveWatch.length > 0) {
    curActiveWatch.forEach((item) => item())
    curActiveWatch.length = 0
  }
}

// 启用自定义 Tab 监听
function loadCustomWatch() {
  const watchFn = watch(
    [newFileNameFormStore, transformNameFormStore, serialNumberFormStore],
    () => {
      resetTableDataList()
      newFileNameTransfer()
      serialNumberTransfer()
      ruleTransfer()
    },
    { immediate: true }
  )

  curActiveWatch.push(watchFn)
}

// 启用插入 Tab 监听
function loadInsertWatch() {
  const watchFn = watch(
    [insertNameFormStore, transformNameFormStore, serialNumberFormStore],
    () => {
      resetTableDataList()
      insertNameTransfer()
      serialNumberTransfer()
      ruleTransfer()
    },
    { immediate: true }
  )

  curActiveWatch.push(watchFn)
}

// 启用替换 Tab 监听
function loadReplaceWatch() {
  const watchFn = watch(
    [replaceContentFormStore, transformNameFormStore, contentSwapFormStore],
    () => {
      resetTableDataList()
      replaceContentTransfer()
      ruleTransfer()
      contentSwapTransfer()
    },
    { immediate: true }
  )

  curActiveWatch.push(watchFn)
}

// 启用删除 Tab 监听
function loadRemoveWatch() {
  const watchFn = watch(
    [contentRemoveFormStore, transformNameFormStore],
    () => {
      resetTableDataList()
      contentRemoveTransfer()
      ruleTransfer()
    },
    { immediate: true }
  )

  curActiveWatch.push(watchFn)
}

const importSubTabRef = ref<InstanceType<typeof ImportSubTab>>()

// 启用导入 Tab 监听
function loadImportWatch() {
  const watchFn = watch(
    [
      () => fileRenameExcelStore.getExcelInitialData().excelFileName,
      () => fileRenameExcelStore.getExcelInitialData().excelFileContent.length
    ],
    () => {
      resetTableDataList()
      importSubTabRef.value?.handleParse()
    },
    { immediate: true }
  )

  curActiveWatch.push(watchFn)
}

const { resetWorkbench } = useResetWorkbench()
</script>

<style lang="less" scoped>
.el-tabs--border-card {
  border-left: none;
  border-right: none;
  border-bottom: none;
}

:deep(.el-tabs__content) {
  padding: 15px 0 0 0;
}

.rename-workbench {
  color: var(--el-text-color-regular);
}
</style>
